$border-split : #ddd;
$main-color : #eb4b51;
$disabled : #ccc;
.wrapper {
	// border-top:1px solid #f1f1f1;
	.slider-box {
		float: left;
		// padding:50px 0 0 0;
		ul li {
			// margin:7px 0 7px 0;
		}
	}
	.slider-title {
		// border-bottom: 1px solid #f1f1f1;
		// padding-bottom: 10px;
	}
	.bill {
		// float: right;
	}
}

.hide {
	display:none!important
}

.bill {
	.select-list-box li:first-child {
		display:none;
	}
	padding: 20px 40px;
	// margin: 0 auto;
	// width: 804px;
	border-left:1px solid #f1f1f1;
	button {
			background-color: $main-color;
			border:none;
			outline: none;
			width: 90px;
			height: 30px;
			border-radius:2px;
			color: #fff;
	}
	button[disabled] {
		background-color: $disabled;
	}
	button[type=reset] {
		border:none;
		background-color:transparent;
		color: $main-color;
	}
	button + button {
		margin-left: 5px;
	}
}
.search {
	border: 1px solid $border-split;
	padding: 15px 5px;
	.line {

	}
	.inputs {
		position: relative;
		padding-left:70px;
		width: 320px;
		margin: 0 15px 10px 0;
		float:left;

		label {
			position: absolute;
			left: 0;
			top: 0;
			width: 65px;
			text-align: right;
			line-height: 32px;
			white-space: nowrap;
		}
		input {
			border:1px solid $border-split;
			border-radius : 2px;
			padding: 7px 5px;
			width: 308px;
		}
		[name=status] {
			width: 208px;
		}
		.error,.required {
			input {
				border-color:#FA787E;
			}
		}
		.validation-error {
			color: #FA787E;
			font-size: 12px;
		}
		p {
			width: 220px;
			position: relative;
			i {
				display: none;
				position: absolute;
				content: "";
				width: 30px;
				height: 30px;
				background: url('../../images/icon.png') no-repeat -685px -178px;
				right: 0;
				top: 0;
				cursor: pointer;
			}
		}
		.form-group {
			margin: 0;
		}

	}
	.inputs-arrow {
		width: 285px;
		&>div {
			div {
				width: 208px;
				margin-left: 10px;
				i {
					position: absolute;
					content: "";
					width: 30px;
					height: 30px;
					// background: url('../../images/icon.png') no-repeat -685px -178px;
					right: 0;
					top: 0;
					cursor: pointer;
				}
			}
		}
		p {
			width: inherit;
			
		}
	}
	.inputs-time {
		width: 460px;
		input {
			width: 208px;
		}
		i {
			margin: 5px 2px 5px 8px;
			color: $border-split;
			float: left;
		}
		.form-group {
			float: left;
			width: 220px;
		}
	}
	.submit {
		text-align: right;
		margin-right: 10px;
		span {
			color: $main-color;
			margin-right: 5px;
			cursor: pointer;
		}
	}
}


/* .hna-checkbox */
.hna-checkbox {
  width: 22px;
  height: 22px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.hna-checkbox label {
  width: 17px;
  height: 17px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;

  background: #fff;
  border:1px solid #ccc;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
}
.hna-checkbox label:after {
  content: '';
  width: 9px;
  height: 5px;
  position: absolute;
  top: 2px;
  left: 3px;
  border: 3px solid #fff;
  border-top: none;
  border-right: none;
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hna-checkbox input[type=checkbox] {
  visibility: hidden;
}
.hna-checkbox input[type=checkbox]:checked + label {
	  background: $main-color;
	  border-color:  $main-color
}
.hna-checkbox input[type=checkbox]:checked + label:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

.bill-list {
	position: relative;
	margin-top: 20px;
	.bill-line {
		position: relative;
		padding-left: 40px;
		margin-bottom: 10px;
		.hna-checkbox {
			position: absolute;
			top: 12px;
			left: 5px;
		}
		.btn-group {
			padding-top: 5px;
			margin-left: 0;
		}
	}
	.bill-line-pl0 {
		padding-left:0;
	}
	.bill-line-h {
		border:1px solid #ddd;
		background: #f6f8fa;
		padding: 0 15px;
		line-height: 44px;
		span {
			font-weight: bold;
		}
		i {
			font-style: normal;
			color: #01aaed;
			font-weight: bold;
		}
		span:last-child {
			float: right;
			font-weight: normal
		}
		a {
			color: $main-color;
		}
	}
	.bill-line-body {
		border:1px solid #ddd;
		border-top: none;
		padding: 30px 35px 30px 15px;
		ul {
			float: left;
			line-height: 30px;
		}
		ol {
			float: right;
			line-height: 30px;
			text-align: center;
			padding-top: 30px;
			a {
				color: $main-color
			}
		}
		.padding0 {
			padding-top:0;
		}
	}
}

.hna-msg {
	position: fixed;
	top:0;
	width:580px;
	height:40px;
	line-height:40px;
	background-color:#e4fefa;
	text-align:center;
	left:50%;
	transform:translate(-290px,0);
	overflow:hidden;
	&>div {
		margin:0!important;
		padding:0!important;
		border:none!important;
	}
	button {
		display: none;
	}
	.confirm {
		display: block;
		position: absolute;
		right: 15px;
		top:0;
		color: #666;
		height: 40px;
		line-height:40px;
		border:none;
		background:none;
		font-family: "黑体"
	}
	i {
		display: inline-block;
		width: 40px;
		height: 40px;
		background:url("../../images/icon.png") -823px -113px no-repeat;
		vertical-align: -1.3em;
	}
}
.hna-msg-error {
	background-color:#fcead5;
	i {
		background-position:-823px -71px;
	}
}
.hna-msg-song {
	background-color:#ecfbe2;
	i {
		background-position:-823px -148px;
	}
}
.hna-portal {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgba(0,0,0,0.07);
	&>div {
		position: absolute;
		top:30%;
		left:50%;
		transform:translate(-50%,0);
		background-color:#fff;
		width:310px;
		border:1px solid #ccc;
		height:160px;
		padding-bottom:80px;
	}
	.btn-group {
		text-align: center;
		padding:10px 0 30px;
		position:absolute;
		bottom:0;
		left: 0;
		right: 0;
		button ~ button {
			margin-left: 10px;
		}
	}
	.confirm {
		background-color: $main-color;
		border:none;
		outline: none;
		width: 90px;
		height: 30px;
		border-radius:2px;
		color: #fff;
	}
	.cancel {
		background-color: #fff;
		border: 1px solid #bcbcbc;
		color: #999;
		width: 90px;
		height: 30px;
		border-radius:2px;
	}
	.title {
		margin-top:20px;
		font-size: 18px;
		color: #888;
		margin-bottom: 20px;
		text-align: center
	}
	.title-icon {
		width: 64px;
		height: 64px;
		margin-left: auto;
		margin-right: auto;
		background:url("../../images/icon.png") -883px -148px no-repeat;
	}
	.title-fail {
		background-position:-883px -70px;
	}
	.content {
		text-align: center;
		color: #888;
		font-size: 14px;
		line-height:30px;
		width: auto;
		margin-top: 40px;
		padding-top:0;
	}
}
